
import React, { memo, useCallback } from 'react'
import ProductModel from '@models/productModel'
// @ts-ignore
import Styles from './index.scss'
// @ts-ignore
import FormIcon from '../../../icons/form.svg'
import { Card, WingBlank, Button } from 'antd-mobile';
import WImage from '@components/global/image'
import Rourter from 'next/router'

interface PropsInterface {
  models: ProductModel[]
}
// @ts-ignore
const Product = (props: PropsInterface) => {

  const allBtnClick = useCallback(() => {
    Rourter.push('/product/types')
  }, [])

  return (
    <WingBlank size="sm" className={Styles['com-me-product']}>
      <Card>
        <Card.Header
          title={<span className={Styles['title']}>作品</span>}
          extra={<Button size="small" type="primary" inline onClick={allBtnClick}>查看全部</Button>}
        />
        <Card.Body className={Styles['list']}>
          {
            props.models.map((item) => {
              return (
                <WImage
                  toPath={`/product/detail?id=${item._id}`}
                  key={item._id}
                  className={Styles['item']}
                  url={item.cover}
                  width={175}
                  height={175} />
              )
            })
          }
        </Card.Body>
      </Card>
    </WingBlank>
  )
}

export default memo(Product)